<template>
  <div class="Home-wapper">
    <van-grid :column-num="4">
      <van-grid-item
        v-for="item in gridContens"
        @click="gotoModulePage(item)"
        :key="item.id"
        icon="photo-o"
        :text="item.text"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      gridContens: [
        {
          id: 1,
          text: "自动还款",
          path: "autoRepayment"
        },
        {
          id: 2,
          text: "立即办卡",
          path: "applyCard"
        },
        {
          id: 3,
          text: "卡片激活",
          path: "activateCard"
        },
        {
          id: 4,
          text: "账单明细",
          path: "BillingDetail"
        },
        {
          id: 5,
          text: "还款明细",
          path: "repaymentDetail"
        },
        {
          id: 6,
          text: "查账还款",
          path: "repayment"
        },
        {
          id: 7,
          text: "我要分期",
          path: "splitPeriod"
        },
        {
          id: 8,
          text: "其他",
          path: ""
        }
      ]
    };
  },
  methods: {
    gotoModulePage(item) {
      if (!item.path) return;
      const pathFlag = /^\//.test(item.path);
      const newPath = pathFlag ? item.path : `/${item.path}`;
      this.$router.push(newPath);
    }
  }
};
</script>